<template>
  <div>
    <Add ref="add" v-if="companyLevel.length > 0" :companyLevel="companyLevel" @ok="search"></Add>
    <Update ref="update" v-if="companyLevel.length > 0" @ok="search" :companyLevel="companyLevel"></Update>
    <Authorization ref="authorization" v-if="isShowAuth" @ok="search"></Authorization>
    <ZgNewPage
      ref="page"
      :title="pageTitle"
      :showInlineBtn="false"
      :uniqueName="uniqueName"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :extraBtns="extraBtns"
      :headers="headers"
      :conditions="conditions"
      :adminWidth="420"
      :scrollX="1500"
      @search="onSearch"
      @filter="onFilter"
      @header="mergeHeader"
      @admin="toAdmin"
      @extra="toExtra"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h,i) in headers"
          :key="`column${i}`"
          :width="h.width===0 ? 'auto' : h.width"
          align="center"
          :title="h.label">
          <template slot-scope="record">
            <template v-if="h.code == 'type'">
              <ZgDicHolder :code="record[h.code]" parentCode="userType"/>
            </template>
            <template v-else-if="h.code == 'authStatue'">
              {{ record[h.code] ? '已认证' : '未认证' }}
            </template>
            <template v-else>{{ record[h.code] }}</template>
          </template>
        </a-table-column>
      </template>
      <template slot="thMode" slot-scope="scope">
        <a-row :gutter="10">
          <a-col :span="4" v-for="t in scope.list" :key="`thMode_${t.id}`">
            <a-card class="mb10">
              <div class="wfull h100 scroll">
                {{ t }}
              </div>
            </a-card>
          </a-col>
        </a-row>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
import Authorization from './Authorization'
export default {
  components: {
    Add, Update, Authorization
  },
  data () {
    return {
      pageTitle: '产品配置',
      uniqueName: 'test',
      pageOpt: {
        showConditionBtn: true,
        showHeaderConfig: true,
        showAttachBtn: true,
        showPageTitle: false
      },
      conditions: [
        { code: 'roleName', compType: '单行文本', label: '角色名称', defaultVal: '' }
      ],
      headers: [
        { code: 'type', label: '角色类型', isShow: true, sort: 0 },
        { code: 'name', label: '角色名称', isShow: true, sort: 0 },
        { code: 'authStatue', label: '认证状态', isShow: true, sort: 0 },
        { code: 'enLevelset', label: '企业等级', isShow: true, sort: 0 },
        { code: 'intro', label: '角色描述', isShow: true, sort: 0 }
      ],
      dataBtns: [
        { key: 1, name: '详情', type: 'link', isShow: () => { return true } },
        { key: 2, name: '编辑', type: 'link', isShow: () => { return true } },
        { key: 3, name: '删除', type: 'link', isShow: () => { return true } },
        { key: 4, name: '功能授权', type: 'link', isShow: () => { return true } },
        { key: 5, name: '智能助手', type: 'link', isShow: () => { return true } }
      ],
      extraBtns: [
        { key: 1, name: '新增', icon: 'plus-circle', type: 'primary' }
      ],
      companyLevel: [],
      isShowAuth: false
    }
  },
  mounted () {
    this.getEnLevel()
  },
  methods: {
    search () {
      this.$refs.page.search()
    },
    onSearch (param) {
      const diyHeaders = localStorage.getItem(this.currentUser.username + '_diyHeader_' + this.uniqueName)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }

      this.getList(param)
    },
    getList (param) {
      delete param.searchStr
      this.$http.post('/zg-scf/role/system/page', param).then(res => {
        if (res.code === 1) {
          const list = res.data.records.map(t => {
            return {
              ...t,
              enLevelset: t.enLevel ? t.enLevel.levelName : '',
              enLevelId: t.enLevel ? t.enLevel.id : '',
            }
          })
          this.$refs.page.endSearch({
            total: list.length,
            list: list
          })
        }
      })
    },
    onFilter (f, param) {
    },
    toAdmin (param) {
      if (param.key === 1) {
        this.$refs.update.open(param.obj, 'details')
      } else if (param.key === 2) {
        this.$refs.update.open(param.obj, 'edit')
      } else if (param.key === 3) {
        this.confirm(
          () => {
            this.$http.post('/zg-scf/role/remove', [param.obj.roleId], () => {
              this.$refs.page.search()
            })
          },
        '确定要删除这条数据么')
      } else if (param.key === 4) {
        this.isShowAuth = true
        this.$nextTick(() => {
          this.$refs.authorization.open(param.obj)
        })
      } else if (param.key === 5) {
        alert('智能助手')
      }
    },
    toExtra (opt) {
      this.$refs.add.open()
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders.filter(t => {
        return t.isShow
      }).sort((a, b) => {
        return a.sort - b.sort
      })
    },
    // 获取企业等级
    getEnLevel () {
      this.$http.post('/zg-scf/enLevel/list', { 'enType': 1 }).then(res => {
        if (res.code === 1) {
          const data = res.data.map(item => {
            return {
              ...item,
              label: item.levelName,
              value: item.id,
            }
          })
          this.companyLevel = data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
</style>
